<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <div>
    
    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.OrgMembersController" class="page container-pf-nav-pf-vertical container-fluid" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div ng-include="'plugins/api-manager/html/org/org_bc.include'"></div>
      <div class="row">
        <div ng-include="'plugins/api-manager/html/org/org_entity.include'"></div>
        <!-- Center Content -->
        <div class="col-md-8">
          <div class="apiman-entitytabs">
            <ul id="entitytabs" class="nav nav-tabs">
              <li apiman-permission="apiView"><a href="{{ pluginName }}/orgs/{{org.id}}/apis" data-field="toOrgAPIs" apiman-i18n-key="apis">APIs</a></li>
              <li apiman-permission="clientView"><a href="{{ pluginName }}/orgs/{{org.id}}/clients" data-field="toOrgClients" apiman-i18n-key="client-clients">Client Apps</a></li>
              <li apiman-permission="planView"><a href="{{ pluginName }}/orgs/{{org.id}}/plans" data-field="toOrgPlans" apiman-i18n-key="plans">Plans</a></li>
              <li class="active"><a href="{{ pluginName }}/orgs/{{org.id}}/members" data-field="toOrgMembers" apiman-i18n-key="members">Members</a></li>
              <li class="pull-right"><a href="{{ pluginName }}/orgs/{{org.id}}/activity" data-field="toOrgActivity" apiman-i18n-key="activity">Change Log</a></li>
            </ul>
            <div id="entitytabsContent" class="tab-content">

              <!-- Members Tab Content -->
              <div class="tab-pane active" id="tab-members">
                <div class="apiman-filters apiman-members-filters">
                  <div>
                    <apiman-search-box id="members-filter" apiman-i18n-key="filter-members" function="filterMembers" apiman-i18n-key="org-members.filter-by-member-name" placeholder="Filter by member name..." />
                  </div>
                  <a apiman-permission="orgAdmin" href="{{ pluginName }}/orgs/{{org.id}}/manage-members" class="btn btn-default pull-right" data-field="toManageMembers" apiman-i18n-key="manage-members">Manage Members</a>
                </div>
                <div class="clearfix"></div>
                <!-- The organization's list of members -->
                <div class="apiman-members" data-field="members">

                  <div class="apiman-no-content container-fluid" ng-hide="members.length > 0">
                    <div class="row">
                      <div class="col-md-12">
                        <p class="apiman-no-entities-description" apiman-i18n-key="no-members-found-for-org">This is very strange, but apparently this organization has no members!  Highly irregular!</p>
                      </div>
                    </div>
                  </div>

                  <div class="apiman-no-content container-fluid" ng-show="members.length > 0 && filteredMembers.length == 0">
                    <div class="row">
                      <div class="col-md-12">
                        <p class="apiman-no-entities-description" apiman-i18n-key="no-members-found-for-filter">No members found matching your filter criteria - please try searching for something different.</p>
                      </div>
                    </div>
                  </div>

                  <div class="container-fluid apiman-summaryrow" ng-repeat="member in filteredMembers">
                    <div class="row">
                      <span class="title">
                        <a href="{{ pluginName }}/users/{{ member.userId }}/orgs">{{ member.userName }}</a>
                        <span class="secondary">({{ member.userId}})</span>
                      </span>
                      <a class="apiman-summaryrow-icon">
                        <i class="fa fa-clock-o fa-fw"></i>
                        <span apiman-i18n-key="joined-on" class="title-summary-item">Joined on</span>
                        <span class="title-summary-item">{{ member.joinedOn | date:'yyyy-MM-dd' }}</span>
                      </a>
                    </div>
                    <div class="row">
                      <span class="description" ng-repeat="role in member.roles">
                        {{ role.roleName}} {{ $last ? '' : ($index==member.roles.length-2) ? ' and ' : ', ' }}
                      </span>
                    </div>
                    <hr/>
                  </div>
                </div>
              </div>
              <!-- End Members Tab Content -->

            </div>
          </div>
        </div>
        <!-- /Center Content -->

      </div>
    </div> <!-- /container-pf-nav-pf-vertical container-fluid -->
  </div>
  </body>
</html>
